<template>
  <div class="film-search">
    <app-title title="猫眼电影" back='true'></app-title>
    <div class="film-search-bar">
      <div class="film-search-input">
        <img src="../../../assets/search.png" alt="搜索">
        <input type="text" placeholder="搜电影、搜影院">
      </div>
      <span class="film-search-cancel" @click="$router.go(-1)">取消</span>
    </div>
  </div>
</template>
<script>
import AppTitle from './../home/Title'
export default {
  components: {
    AppTitle
  }
}
</script>
<style lang="scss" scoped>
  @import "../../../styles/common/var";
  .film-search{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    .app-title{
      width: 100%;
      height: $--tab-height;
      line-height: $--tab-height;
      position: absolute;
      top: 0;
      z-index: 10001;
      background: $--color-red;
    }
    &-bar{
      position: relative;
      top: $--tab-height;
      width: 100%;
      height: 85px;
      line-height: 55px;
      padding: 15px 0px 15px 20px;
      background: #f5f5f5;
      border-bottom: 1px solid #e5e5e5;
      display: flex;
    }
    &-input{
      width: 620px;
      height: 55px;
      float: left;
      background: #fff;
      border-radius: 8px;
      border: 1px solid #e5e5e5;
      img{
        width: 30px;
        margin: 10px 15px;
        float: left;
      }
      input{
        width: 500px;
        height: 100%;
        float: left;
        background: transparent;
        outline: none;
        border: none;
      }
    }
    &-cancel{
      flex:1;
      text-align: center;
      font-size: 32px;
      display: inline-block;
      padding: 0 10px;
      color:$--color-red;

    }
  }
</style>
